<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模态框</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--
        	作者：zxy
        	时间：2019-07-28
        	描述：模态框 必须放在最顶层，且不能重叠
        -->
        <!--通过一个按钮触发模态框-->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" 
        	data-target="#myModal" data-whatever="@Dema">
        	启动模态框
        </button>
        
        
        <!--模态框边界-->
        <!--tabindex=-1该元素用tab键获取不到焦点，但是可以通过js获取-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" >
        	<!--模态框的消息框-->
        	<div class="modal-dialog modal-sm">
        		<!--内容-->
        		<div class="modal-content">
        			<!--头部-->
        			<div class="modal-header">
        				<!--一个X按钮 ，点击关闭modal-->
        				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
        					<span >&times;</span>
        				</button>
        				<h4 class="modal-title" id="myModalLabel">模态框的标题</h4>
        			</div>
        			
        			<!--身体-->
        			<div class="modal-body">
        				
        				<!--
                        	作者：zxy
                        	时间：2019-07-28
                        	描述：修改的地方
                        -->
                        
                        <div class="form-group">
                        	<label class="control-label">UserName</label>
                        	<input type="text" class="form-control"  />
                        </div>
                        <div class="form-group">
                        	<label class="control-label">Password</label>
                        	<input type="password" class="form-control" />
                        </div>
        			</div>
        			
        			<!--脚部-->
        			<div class="modal-footer">
        				<button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>
        				<button type="button" class="btn btn-primary">Save</button>
        			</div>
        		</div>
        	</div>
        </div>
        
        <script>
        	$("#myModal").modal("show");	
        	$("#myModal").on("show.bs.modal",function(e){
        		var button=$(e.relatedTarget)
        		var recipient=button.data("whatever");
        		var modal=$(this);
        		modal.find(".modal-title").text("Hello:"+recipient);
        		modal.find(".modal-body input").val(recipient);
        	})
        	
        	$("#myModal").modal({
        		backdrop:false/*模态框点击空白处不再消失*/
        	})
        	
        	/*$("#myModal").modal("hide");*/
        	
        	$("#myModal").on("hidden.bs.modal",function(e){
        		alert("模态框关闭了");
        	})
        </script>
	</body>
</html>
